// 导入路由相关的组件
// BrowserRouter：类似于vue中的history路由模式
// HashRouter：类似于vue中的hash路由模式
// Link：用于定义路由链接：类似于vue中的router-link组件
// Routes：是路由容器，在里面定义所有路由打开的页面
// Route：用于配置单个路由页面，它有两个重要的属性：path(指定路由地址)和element(指定路由组件)
import {BrowserRouter, HashRouter, Link, Route, Routes, useRoutes} from 'react-router-dom'

// 导入App组件的样式
import './App.scss';

// 采用懒加载的路由组件，必须要配合Suspense组件才能显示
import {Suspense} from "react";


// Provider组件用于在全局注入全局状态
import {Provider} from 'react-redux'
// 导入创建好的store对象，并注入到全局中
import store from "./store";
// 导入页面组件
import routesList from "./router";
// import Home from "./views/1_Home/home";
// import About from "./views/2.1_路由跳转1_关于/about";
// import City from "./views/2.2路由跳转页1_城市/city";
// import Phone from "./views/2.3路由跳转页2_手机/phone";
// import First, {Page1, Page2, Page3, Page4} from "./views/3_路由嵌套,多级路由/first";
// import MyPage1 from "./views/4_Redux状态管理器/page1";
// import MyPage2 from "./views/5_Mobx状态管理器/page2";
// import MyPage3 from "./views/6_配置代理服务器-第三方组件库应用/page3";
// import NotFount from "./views/路由未识别404页面/notFount";
const WrapperRoutes = () => {
    let element = useRoutes(routesList)
    return element
}

// 采用函数方式创建App组件
function App() {
    return (
        <Provider store={store}>
            <BrowserRouter>
                <div className="App">
                    <div className="nav">
                        <Link to='/'>首页</Link>
                        <Link to='/about'>关于</Link>
                        <Link to='/first'>一级路由</Link>
                        <Link to='/page1'>redux状态管理器</Link>
                        <Link to='/page2'>mobx状态管理器</Link>
                        <Link to='/page3'>代理服务器</Link>
                        <Link to='/page4'>富文本编辑器</Link>
                    </div>
                    {/* 路由 */}
                    <WrapperRoutes/>
                </div>
            </BrowserRouter>
        </Provider>
    );
}

export default App;
